<template>
    <div class="container">
        <h2>Our Products</h2>			
        <div class="col-md-9 product-model-sec">
            <div class="product-grid">
                <a href="single.html">				
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m1.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                            <h4 class="b-animate b-from-left  b-delay03">							
                                <button>View</button>
                            </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>												
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m2.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button>View</button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>						
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m3.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>						
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m4.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>							
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m5.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>							
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m6.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>						
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m7.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>						
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m8.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>							
                </div>
            </div>
            <div class="product-grid">
                <a href="single.html">
                    <div class="more-product"><span> </span></div>						
                    <div class="product-img b-link-stripe b-animate-go  thickbox">
                        <img src="../assets/images/m9.png" class="img-responsive" alt="">
                        <div class="b-wrapper">
                        <h4 class="b-animate b-from-left  b-delay03">							
                        <button> View </button>
                        </h4>
                        </div>
                    </div>
                </a>				
                <div class="product-info simpleCart_shelfItem">
                    <div class="product-info-cust prt_name">
                        <h4>Product #1</h4>								
                        <span class="item_price">$2000.00</span>
                        <div class="ofr">
                            <p class="pric1"><del>$2300.00</del></p>
                            <p class="disc">[15% Off]</p>
                        </div>
                        <input type="text" class="item_quantity" value="1">
                        <input type="button" class="item_add items" value="Add">
                        <div class="clearfix"> </div>
                    </div>						
                </div>
            </div>
        </div>	
        <div class="col-md-3 rsidebar span_1_of_left">
            <section class="sky-form">
                <div class="product_right">
                    <h4 class="m_2"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>Categories</h4>
                    <div class="tab1">
                        <ul class="place">								
                            <li class="sort">Regular Cakes</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></li>								
                        </ul>
                        <div class="clearfix"> </div>
                        <div class="single-bottom" style="display: none;">						
                            <a href="#"><p>Cassata</p></a>
                            <a href="#"><p>Cheesecake</p></a>
                            <a href="#"><p>Coconut cake</p></a>
                            <a href="#"><p>Cupcake</p></a>
                        </div>
                    </div>						  
                    <div class="tab2">
                        <ul class="place">								
                            <li class="sort">Special Cakes</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></li>
                        </ul>
                        <div class="clearfix"> </div>
                        <div class="single-bottom" style="display: none;">						
                            <a href="#"><p>Delicious Cakes</p></a>
                            <a href="#"><p>Gingerbread</p></a>									
                        </div>
                    </div>
                    <div class="tab3">
                        <ul class="place">								
                            <li class="sort">Eggless Cake</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></li>
                        </ul>
                        <div class="clearfix"> </div>
                        <div class="single-bottom" style="display: none;">						
                            <a href="#"><p>Milk Cakes</p></a>
                            <a href="#"><p>Fruits Cakes</p></a>
                        </div>
                    </div>
                    <div class="tab4">
                        <ul class="place">								
                            <li class="sort">2-3 Tier Cakes</li>
                            <li class="by"><span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></li>
                        </ul>
                        <div class="clearfix"> </div>
                        <div class="single-bottom" style="display: none;">						
                            <a href="#"><p>Twist 4 tier</p></a>
                            <a href="#"><p>Floral Tier</p></a>
                            <a href="#"><p>Double Heartshape</p></a>
                        </div>
                    </div>
                </div>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>DISCOUNTS</h4>
                <div class="row row1 scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 221px;" tabindex="0">
                    
                    
                <div class="jspContainer" style="width: 221px; height: 162px;"><div class="jspPane" style="padding: 0px; width: 214px; top: 0px;"><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Upto - 10% (20)</label>
                    </div><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>70% - 60% (5)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>50% - 40% (7)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (2)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (5)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>30% - 20% (7)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>10% - 5% (2)</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Other(50)</label>
                    </div></div><div class="jspVerticalBar"><div class="jspCap jspCapTop"></div><div class="jspTrack" style="height: 162px;"><div class="jspDrag" style="height: 91px;"><div class="jspDragTop"></div><div class="jspDragBottom"></div></div></div><div class="jspCap jspCapBottom"></div></div></div></div>
            </section>  				 
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>Price</h4>
                <ul class="dropdown-menu1">
                    <li><a href="">								               
                        <div id="slider-range" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header" style="left: 0.5%; width: 99.5%;"></div><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 0.5%;"></a><a class="ui-slider-handle ui-state-default ui-corner-all" href="#" style="left: 100%;"></a></div>							
                        <input type="text" id="amount" style="border: 0; font-weight: NORMAL;   font-family: 'Dosis-Regular';">
                        </a></li>			
                </ul>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>By Flavour</h4>
                <div class="row row1 scroll-pane jspScrollable" style="overflow: hidden; padding: 0px; width: 221px;" tabindex="0">
                    
                    
                <div class="jspContainer" style="width: 221px; height: 162px;"><div class="jspPane" style="padding: 0px; width: 214px; top: 0px;"><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Vanilla</label>			
                    </div><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Chocolate</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Butterscotch</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Strawberry</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Black Forest</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Mixed Fruit</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Honey</label>
                    </div></div><div class="jspVerticalBar"><div class="jspCap jspCapTop"></div><div class="jspTrack" style="height: 162px;"><div class="jspDrag" style="height: 103px;"><div class="jspDragTop"></div><div class="jspDragBottom"></div></div></div><div class="jspCap jspCapBottom"></div></div></div></div>
            </section>
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>Weight</h4>
                <div class="row row1 scroll-pane" style="overflow: hidden; padding: 0px; width: 221px;">
                            
                    
                <div class="jspContainer" style="width: 221px; height: 162px;"><div class="jspPane" style="padding: 0px; top: 0px; left: 0px; width: 221px;"><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>Half KG</label>
                    </div><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>One KG</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>TwO KG</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>More</label>
                    </div></div></div></div>
            </section>	
            <section class="sky-form">
                <h4><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>Color</h4>
                <div class="row row1 scroll-pane" style="overflow: hidden; padding: 0px; width: 221px;">
                    
                    
                <div class="jspContainer" style="width: 221px; height: 162px;"><div class="jspPane" style="padding: 0px; top: 0px; left: 0px; width: 221px;"><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i></i>White</label>
                    </div><div class="col col-4">
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Pink</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Gold</label>
                        <label class="checkbox"><input type="checkbox" name="checkbox"><i></i>Silver</label>
                    </div></div></div></div>
            </section>			 
        </div>
        <div class="clearfix"> </div>
    </div>
</template>

<script>
    import 'assets/css/form.css'
    // import 'assets/css/jquery-ui.css'
    import 'assets/js/jquery.min.js'
    import 'assets/js/jquery.mousewheel.js'
    
    export default {
        name: 'cake',
    }

</script>

<style>
</style>
